<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8" />  
    <title>表单练习</title>  
    <style type="text/css">  
        form {  
            border: 2px solid gray;  
            background-color: #FC6;  
            padding: 20px;  
            margin: 20px;  
        }  
  
        input, select {  
            border: 2px solid gray;  
            padding: 5px;  
            margin: 5px 0;  
        }  
  
        input:hover, select:hover {  
            border-color: orange;  
        }  
  
        label {  
            font-weight: bold;  
            margin-right: 10px;  
        }  
    </style>  
</head>  
<body>  
    <form action="#" method="get" accept-charset="utf-8">   
        <p>  
            <label for="userName">用户名：</label>  
            <input type="text" name="userName" value="" id="userName" />  
        </p>  
        <p>  
            <label for="password">密&nbsp;&nbsp;码：</label>  
            <input type="password" name="password" value="" id="password" />  
        </p>  
        <p>  
            <label>性&nbsp;&nbsp;别：</label>  
            <input type="radio" name="gen" value="male" id="male" checked="checked" />  
            <img src="images/male.gif" alt="男" />&nbsp;&nbsp;  
            <input type="radio" name="gen" value="female" id="female" />  
            <img src="images/female.gif" alt="女" />  
        </p>  
        <p>  
            <label>爱&nbsp;&nbsp;好：</label>  
            <input type="checkbox" name="hobby" value="sport" id="sport" checked="checked" />  
            运动  
            <input type="checkbox" name="hobby" value="chat" id="chat" />  
            聊天  
            <input type="checkbox" name="hobby" value="game" id="game" />  
            游戏  
        </p>  
        <p>  
            <label for="profession">职&nbsp;&nbsp;业：</label>  
            <select name="profession" id="profession">  
                <option value="student" selected="selected">学生</option>  
                <option value="teacher">老师</option>  
            </select>  
        </p>  
        <p>  
            <input type="submit" name="submit" value="提交" id="submit" />  
            <input type="reset" name="reset" value="清空" id="reset" />  
        </p>  
    </form>  
</body>  
</html>